import {useSelector,useDispatch} from 'react-redux';
import * as actionTypes from './store/action-types';
function Counter(){
    //使用选择器可以从仓库的状态中选择一部分状态出来
    //useSelector内部有一个性能优化，当返回值变化的时候才会重新渲染，不变化则不重新渲染
    //state因为redux规定，state每次变更都要返回一个新的引用地址
    const number = useSelector(state=>state.number);
    //useDispatch会返回派发动作的函数
    const dispatch = useDispatch();
    return (
        <div>
            <p>{number}</p>
            <button onClick={()=>dispatch({type:actionTypes.ADD})}>+</button>
            <button onClick={()=>dispatch({type:actionTypes.ASYNC_ADD})}>异步加1</button>
            <button onClick={()=>dispatch({type:actionTypes.STOP})}>停止累加</button>
            <button onClick={()=>dispatch(
                {type:actionTypes.REQUEST,
                payload:'/user.json'
                })}>开始请求</button>
            <button onClick={()=>dispatch({type:actionTypes.STOP_REQUEST})}>取消请求</button>
        </div>
    )
}
export default Counter